<template>
  <el-dialog
    :fullscreen="isFullscreen"
    :visible="dialogVisible"
    v-if="dialogVisible"
    width="35%"
    :before-close="closeForm"
  >
    <div slot="title" class="header-title hd-title">
      <span>{{ dialogTitle }}</span>
      <i
        v-if="isFullscreen === false"
        class="el-icon-full-screen"
        @click="fScreen"
      ></i>

      <i v-else class="el-icon-news" @click="ifScreen"></i>
    </div>
    <el-form
      :model="form"
      :rules="rules"
      :status-icon="true"
      ref="form"
      label-width="80px"
    >
      <el-tabs v-model="orderName" @tab-click="handleClick">
        <el-tab-pane label="运单信息" name="first">
          <table>
            <thead>
              <th width="120px"></th>
              <th width="470px"></th>
            </thead>
            <tbody>
              <tr>
                <td>运单号</td>
                <td v-if="form.orderDeliver">
                  <div v-for="(item, index) in form.orderDeliver" :key="index">
                    {{ item.invoice_No }}&nbsp;&nbsp;
                  </div>
                </td>
              </tr>
              <tr>
                <td>件数</td>
                <td v-if="form.orderReceipt">
                  {{ form.orderReceipt.amount }}&nbsp;件
                </td>
              </tr>
              <tr>
                <td>重量</td>
                <td v-if="form.orderReceipt">
                  {{ form.orderReceipt.weight }}&nbsp;KG
                </td>
              </tr>
              <tr>
                <td>长*宽*高（CM）</td>
                <td v-if="form.orderReceipt">
                  {{ form.orderReceipt.volume.L || "-" }}&nbsp;x&nbsp;{{
                    form.orderReceipt.volume.W || "-"
                  }}&nbsp;x&nbsp;{{ form.orderReceipt.volume.H || "-" }}
                </td>
              </tr>
              <tr>
                <td>申报总金额</td>
                <td>{{ form.orderReceipt.univalent }}&nbsp;$</td>
              </tr>
              <tr>
                <td>进口方式</td>
                <td v-if="form.orderReceipt">
                  {{ form.orderReceipt.delivery_value.BuyerType }}
                  &nbsp;&nbsp;&nbsp;<i style="color: red; margin-left: 30px"
                    >（备注：A. 电商 D. 个人 E.企业样品 F.企业文件）
                  </i>
                </td>
              </tr>
              <tr>
                <td>用途分类</td>
                <td v-if="form.orderReceipt">
                  <!--                  {{-->
                  <!--                    form.orderReceipt.delivery_value.use_type-->
                  <!--                  }}&nbsp;&nbsp;&nbsp;<i style="color: red; margin-left: 35px"-->
                  <!--                    >（备注：1. 个人 2. 公司 3. 简单清关）-->
                  <!--                  </i>-->
                  <span v-if="form.orderReceipt.delivery_value.use_type === '1'"
                    >个人</span
                  >
                  <span
                    v-else-if="
                      form.orderReceipt.delivery_value.use_type === '2'
                    "
                    >公司</span
                  >
                  <span
                    v-else-if="
                      form.orderReceipt.delivery_value.use_type === '3'
                    "
                    >简单清关</span
                  >
                </td>
              </tr>
              <tr>
                <td>国内物流单号</td>
                <td>{{ waybillNo || "-" }}</td>
              </tr>
              <tr>
                <td>中文备注</td>
                <td>
                  <span v-if="form.orderReceipt.receipt_msg">{{
                    form.orderReceipt.receipt_msg.zhRemarks || "-"
                  }}</span>
                </td>
              </tr>
              <tr>
                <td>韩文备注</td>
                <td>
                  <span v-if="form.orderReceipt.receipt_msg">{{
                    form.orderReceipt.receipt_msg.korRemarks || "-"
                  }}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </el-tab-pane>
        <el-tab-pane label="商品信息" name="second">
          <el-card
            class="box-card"
            v-for="(item, index) in form.orderItem"
            :key="index"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="英文品名"
                  :prop="`orderItem.${index}.product_title.en`"
                  :rules="rules.en"
                >
                  <el-input
                    :disabled="form.orderReceipt.status !== 'PendingItems'"
                    placeholder="请输入英文品名"
                    v-model="item.product_title.en"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="中文品名"
                  :prop="`orderItem.${index}.product_title.zh`"
                  :rules="rules.zh"
                >
                  <el-input
                    :disabled="form.orderReceipt.status !== 'PendingItems'"
                    placeholder="请输入中文品名"
                    v-model="item.product_title.zh"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="产品数量"
                  :prop="`orderItem.${index}.amount`"
                  :rules="rules.amount"
                >
                  <el-input
                    :disabled="form.orderReceipt.status !== 'PendingItems'"
                    placeholder="请输入产品数量"
                    v-model="item.amount"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="单价"
                  :prop="`orderItem.${index}.univalent`"
                  :rules="rules.univalent"
                >
                  <el-input
                    :disabled="form.orderReceipt.status !== 'PendingItems'"
                    placeholder="请输入单价"
                    v-model="item.univalent"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="海关编码"
                  :prop="`orderItem.${index}.hscode`"
                  :rules="rules.hscode"
                >
                  <el-input
                    :disabled="form.orderReceipt.status !== 'PendingItems'"
                    placeholder="请输入产品海关编码"
                    v-model="item.hscode"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="网购链接"
                  :prop="`orderItem.${index}.WebUrl`"
                  :rules="rules.WebUrl"
                >
                  <el-input
                    :disabled="form.orderReceipt.status !== 'PendingItems'"
                    placeholder="请输入网购链接地址"
                    v-model="item.WebUrl"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="收件人信息" name="third">
          <el-row :gutter="0">
            <el-col :span="24">
              <el-form-item
                v-if="form.orderReceipt.receipt_msg.receipt"
                label="收货人"
                prop="orderReceipt.receipt_msg.receipt.kr"
              >
                <el-input
                  :disabled="form.orderReceipt.status !== 'PendingItems'"
                  v-if="form.orderReceipt.receipt_msg.receipt.kr"
                  placeholder="请输入收货人"
                  v-model="form.orderReceipt.receipt_msg.receipt.kr"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                v-if="form.orderReceipt.receipt_msg.address"
                label="地址"
                prop="orderReceipt.receipt_msg.address.kr"
              >
                <el-input
                  :disabled="form.orderReceipt.status !== 'PendingItems'"
                  v-if="form.orderReceipt.receipt_msg.address.kr"
                  placeholder="请输入地址"
                  v-model="form.orderReceipt.receipt_msg.address.kr"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="PCC" prop="orderReceipt.receipt_msg.PCC">
                <el-input
                  :disabled="
                    (form.orderReceipt.status !== 'PendingItems' &&
                      form.orderReceipt.status !== 'ToBeIssued') ||
                    form.error_msg.PCC === 'pass'
                  "
                  v-if="form.orderReceipt.receipt_msg"
                  placeholder="请输入PCC"
                  v-model="form.orderReceipt.receipt_msg.PCC"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="邮编"
                prop="orderReceipt.receipt_msg.postal_code"
              >
                <el-input
                  :disabled="
                    (form.orderReceipt.status !== 'PendingItems' &&
                      form.orderReceipt.status !== 'ToBeIssued') ||
                    form.error_msg.PCC === 'pass'
                  "
                  v-if="form.orderReceipt.receipt_msg"
                  placeholder="请输入邮编"
                  v-model="form.orderReceipt.receipt_msg.postal_code"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="电话号码"
                prop="orderReceipt.receipt_msg.Tel"
              >
                <el-input
                  :disabled="
                    (form.orderReceipt.status !== 'PendingItems' &&
                      form.orderReceipt.status !== 'ToBeIssued') ||
                    form.error_msg.PCC === 'pass'
                  "
                  v-if="form.orderReceipt.receipt_msg"
                  placeholder="请输入电话号码"
                  v-model="form.orderReceipt.receipt_msg.Tel"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="库内信息" name="fourth">
          <table>
            <thead>
              <th width="120px"></th>
              <th width="470px"></th>
            </thead>
            <tbody>
              <tr>
                <td>数量</td>
                <td v-if="tableList.amount">
                  {{ tableList.amount || "-" }}&nbsp;件
                </td>
              </tr>
              <tr>
                <td>重量</td>
                <td v-if="tableList.weight">
                  {{ tableList.weight || "-" }}&nbsp;KG
                </td>
              </tr>
              <tr>
                <td>体积</td>
                <td v-if="tableList.volume">
                  {{ tableList.volume | filterVolume("V") }}&nbsp;CM³
                </td>
              </tr>
              <tr>
                <td>长*宽*高（CM）</td>
                <td v-if="tableList.volume">
                  {{ tableList.volume | filterVolume("L") }}&nbsp;x&nbsp;{{
                    tableList.volume | filterVolume("W")
                  }}&nbsp;x&nbsp;{{ tableList.volume | filterVolume("H") }}
                </td>
              </tr>
            </tbody>
          </table>
        </el-tab-pane>
        <el-tab-pane label="其它信息" name="five">
          <el-row>
            <el-col :span="24">
              <el-form-item
                label-width="110px"
                v-if="form.orderReceipt.delivery_value"
                label="税金支付"
                style="text-align: left"
              >
                <el-radio
                  v-model="form.orderReceipt.delivery_value.TaxesPay"
                  label="1"
                  >发货方付
                </el-radio>
                <el-radio
                  v-model="form.orderReceipt.delivery_value.TaxesPay"
                  label="2"
                  >收货方付
                </el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="110px"
                v-if="form.orderReceipt.delivery_value"
                label="京东预付"
                style="text-align: left"
              >
                <el-radio
                  v-model="form.orderReceipt.delivery_value.JDPay"
                  label="1"
                  >发货方付
                </el-radio>
                <el-radio
                  v-model="form.orderReceipt.delivery_value.JDPay"
                  label="2"
                  >收货方付
                </el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="110px"
                label="电商类型"
                prop="orderReceipt.delivery_value.BuyerType"
                v-if="form.orderReceipt.delivery_value"
              >
                <el-select
                  :disabled="form.status == 'Outbound'"
                  style="display: block"
                  placeholder="请选择电商类型"
                  v-model="form.orderReceipt.delivery_value.BuyerType"
                >
                  <el-option value="A" label="A.直接购买"></el-option>
                  <el-option value="B" label="B.代购买"></el-option>
                  <el-option value="C" label="C.代派送"></el-option>
                  <el-option value="Z" label="Z.无法确认"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="海外卖家代码"
                label-width="110px"
                v-if="form.orderReceipt.delivery_value"
              >
                <el-input
                  :disabled="form.status == 'Outbound'"
                  placeholder="请输入海外卖家代码"
                  v-model="form.orderReceipt.delivery_value.SellerCode"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="海外卖家商号"
                label-width="110px"
                v-if="form.orderReceipt.delivery_value"
              >
                <el-input
                  :disabled="form.status == 'Outbound'"
                  placeholder="请输入海外卖家商号"
                  v-model="form.orderReceipt.delivery_value.SellerFirm"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="采购代理代码"
                label-width="110px"
                v-if="form.orderReceipt.delivery_value"
              >
                <el-input
                  :disabled="form.status == 'Outbound'"
                  placeholder="请输入采购代理代码"
                  v-model="form.orderReceipt.delivery_value.AgentCode"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="110px"
                label="采购代理商号"
                v-if="form.orderReceipt.delivery_value"
              >
                <el-input
                  :disabled="form.status == 'Outbound'"
                  placeholder="请输入采购代理商号"
                  v-model="form.orderReceipt.delivery_value.AgentFirm"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="110px"
                label="销售代理代码"
                v-if="form.orderReceipt.delivery_value"
              >
                <el-input
                  :disabled="form.status == 'Outbound'"
                  placeholder="请输入销售代理代码"
                  v-model="form.orderReceipt.delivery_value.SellerAgentCode"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="110px"
                label="销售代理商号"
                v-if="form.orderReceipt.delivery_value"
              >
                <el-input
                  :disabled="form.status == 'Outbound'"
                  placeholder="请输入销售代理商号"
                  v-model="form.orderReceipt.delivery_value.SellerAgentFirm"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label-width="110px"
                label="订单号"
                v-if="form.orderReceipt.delivery_value"
              >
                <el-input
                  :disabled="form.status == 'Outbound'"
                  placeholder="请输入订单号"
                  v-model="form.orderReceipt.delivery_value.OrderNumber"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div slot="footer">
      <el-button
        :disabled="form.status !== 'PendingItems'"
        size="small"
        type="primary"
        @click="handleSubmit"
        ><i class="el-icon-circle-plus-outline"></i> 保存
      </el-button>
      <el-button size="small" @click="closeForm"
        ><i class="el-icon-circle-close"></i> 取消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    editData: {
      type: Object,
      default: () => ({}),
    },
    dialogTitle: {
      type: String,
      default: "",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isFullscreen: false,
      form: {},
      rules: {
        // "orderReceipt.receipt_msg.receipt.kr": [
        //   {
        //     required: true,
        //     message: "请输入收货人",
        //     trigger: ["blur", "change"],
        //   },
        // ],
        // "orderReceipt.receipt_msg.address.kr": [
        //   {
        //     required: true,
        //     message: "请输入地址",
        //     trigger: ["blur", "change"],
        //   },
        // ],
        // "orderReceipt.receipt_msg.PCC": [
        //   {
        //     required: true,
        //     message: "请输入PCC",
        //     trigger: ["blur", "change"],
        //   },
        // ],
        // "orderReceipt.receipt_msg.postal_code": [
        //   {
        //     required: true,
        //     message: "请输入邮编",
        //     trigger: ["blur", "change"],
        //   },
        // ],
        // "orderReceipt.receipt_msg.Tel": [
        //   {
        //     required: true,
        //     message: "请输入电话",
        //     trigger: ["blur", "change"],
        //   },
        // ],
        en: [
          {
            required: true,
            message: "请输入英文品名",
            trigger: ["blur", "change"],
          },
        ],
        zh: [
          {
            required: true,
            message: "请输入中文品名",
            trigger: ["blur", "change"],
          },
        ],
        amount: [
          {
            required: true,
            message: "请输入产品数量",
            trigger: ["blur", "change"],
          },
        ],
        univalent: [
          {
            required: true,
            message: "请输入产品单价",
            trigger: ["blur", "change"],
          },
        ],
        hscode: [
          {
            required: true,
            message: "请输入海关编码",
            trigger: ["blur", "change"],
          },
        ],
        WebUrl: [
          {
            required: true,
            message: "请输入网购地址",
            trigger: ["blur", "change"],
          },
        ],
        "orderReceipt.delivery_value.WebUrl": [
          {
            required: true,
            message: "请输入商品网址",
            trigger: ["blur", "change"],
          },
        ],
        "orderReceipt.delivery_value.OrderNumber": [
          {
            required: true,
            message: "请输入订单号",
            trigger: ["blur", "change"],
          },
        ],
        "orderReceipt.delivery_value.BuyerType": [
          {
            required: true,
            message: "请选择电商类型",
            trigger: ["blur", "change"],
          },
        ],
        "orderReceipt.delivery_value.SellerCode": [
          {
            required: true,
            message: "请输入海外卖家代码",
            trigger: ["blur", "change"],
          },
        ],
        "orderReceipt.delivery_value.SellerFirm": [
          {
            required: true,
            message: "请输入海外卖家商号",
            trigger: ["blur", "change"],
          },
        ],
        "orderReceipt.delivery_value.AgentCode": [
          {
            required: true,
            message: "请输入采购代理代码",
            trigger: ["blur", "change"],
          },
        ],
        "orderReceipt.delivery_value.AgentFirm": [
          {
            required: true,
            message: "请输入采购代理商号",
            trigger: ["blur", "change"],
          },
        ],
        "orderReceipt.delivery_value.SellerAgentCode": [
          {
            required: true,
            message: "请输入销售代理代码",
            trigger: ["blur", "change"],
          },
        ],
        "orderReceipt.delivery_value.SellerAgentFirm": [
          {
            required: true,
            message: "请输入销售代理商号",
            trigger: ["blur", "change"],
          },
        ],
      },
      orderName: "first",
      tableList: {},
    };
  },
  watch: {
    editData: {
      handler(val) {
        console.log(val);
        this.form = val;
        console.log(this.form);
        if (val.storageValue) {
          this.tableList = val.storageValue;
        }
      },
    },
  },
  computed: {
    waybillNo() {
      let arr = [];
      if (this.editData.waybill) {
        this.editData.waybill.forEach((item) => {
          arr.push(item.waybill_No);
        });
        return arr.join("    ");
      } else {
        return "-";
      }
    },
  },
  methods: {
    handleClick() {},
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("submit", this.form);
          this.$emit("closeForm");
        } else {
          this.$message({
            type: "warning",
            message: "请完成表单所有必填项",
          });
        }
      });
    },
    closeForm() {
      this.$emit("closeForm");
      this.isFullscreen = false;
      // if (this.$refs["form"] !== undefined) {
      //   this.$refs["form"].resetFields();
      // }
    },
    fScreen() {
      this.isFullscreen = true;
    },
    ifScreen() {
      this.isFullscreen = false;
    },
  },
  filters: {
    filterVolume: function (val, a) {
      if (val) {
        switch (a) {
          case "V":
            return val.V;
          case "L":
            return val.L;
          case "W":
            return val.W;
          case "H":
            return val.H;
        }
      } else {
        return null;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-checkbox__label {
  color: #a9a9a9;
}

.el-form-item {
  margin-bottom: 0px;
}

::v-deep .el-textarea__inner {
  height: 230px;
}

::v-deep .el-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}

::v-deep .el-dialog__body {
  padding: 0 20px;
}

::v-deep .el-dialog__footer {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
}

.el-select-dropdown,
.el-scrollbar,
.el-scrollbar__view,
.el-select-dropdown__item {
  height: auto;
  padding: 0 15px;
}

.hd-title {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  margin-right: 26px;
}

.el-icon-full-screen {
  cursor: pointer;
}

.el-icon-news {
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

tr:nth-child(odd) {
  padding-left: 15px;
  border-bottom: 1px solid #eee;
  height: 35px;
  background: #fff;

  td:nth-child(odd) {
    text-align: left;
  }

  td:nth-child(even) {
    text-align: left;
  }
}

tr:nth-child(even) {
  padding-left: 15px;
  border-bottom: 1px solid #eee;
  height: 35px;
  //background: rgba(253, 253, 253);

  td:nth-child(odd) {
    text-align: left;
  }

  td:nth-child(even) {
    text-align: left;
  }
}

.el-tabs {
  padding-bottom: 30px;
}

.el-card {
  margin: 10px;
}

::v-deep .el-icon-circle-check:before {
  color: green;
}
</style>
